<template>
	<view class="flex-row container-cell">
		<view class="flex-row container-cell-bg" :style="!isShowContrastBtn ? 'width: 100%' : ''">
			<view class="flex-row container-left">
				<image class="image" :style="imgStyle" :src="getImageUrl()" mode="aspectFit"></image>

				<view class="flex-column" style="background-color: transparent;">
					<text class="title1">{{getTitle1()}}</text>
					<text class="title2">{{getTitle2()}}</text>
					<view class="" style="display: flex; flex-wrap: wrap; width: 55vw;"
						:style="!isShowContrastBtn ? 'width: 100%' : ''">
						<view class="title2Border" style="flex-shrink: 0;" v-for="(item,index) in data.features"
							:key="index">
							{{item}}
						</view>
					</view>
				</view>
			</view>

			<view v-if="isShowContrastBtn" class="container-right button">
				<image class="image" style="width: 40rpx; height: 40rpx;" v-if="isContrastPage"
					:src="'https://mcdn.chatgk.com/xcx/static/images/searchcollege/contrast_sel_' + (isSelect ? 's.png':'n.png')"
					mode="aspectFit" @tap.stop="onClickAddContrast"></image>
				<text v-else class="text-add" :class="isSelect ? 'select':''"
					@tap.stop="onClickAddContrast">{{isSelect ? '取消对比':'加入对比'}}</text>
			</view>

			<view class="level container-right" v-if="isShowLevel">
				{{data.eduLevelName}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			data: {
				type: Object,
				default: {}
			},
			isShowContrastBtn: {
				type: Boolean,
				default: true
			},
			isContrastPage: {
				type: Boolean,
				default: false
			},
			isSelect: {
				type: Boolean,
				default: false
			},
			imgStyle: {
				type: String,
				default: ''
			},
			isShowLevel: {
				type: Boolean,
				default: false
			}
		},
		methods: {
			getImageUrl() {
				let url = this.$imageUrl + this.data.logoUrl
				return this.data.logoUrl ? url :
					'https://mcdn.chatgk.com/xcx/static/images/searchcollege/item-default.png'
			},
			getTitle1() {
				let name = this.data.cnName
				return name ? name : "name"
			},
			getTitle2() {
				let data = this.data
				let categoriesarr = data.categories.length > 0 ? data.categories.join("/") : ''
				let natureTypeNamestr = data.natureTypeName ? data.natureTypeName + '/' : ''
				let title = data.provinceName + ' ' + data.cityName + '/' + natureTypeNamestr + categoriesarr +
					'/' + data.belong

				return title != undefined ? title : "省 市 | 类型"
			},
			getCollegeTag() {
				let data = this.data
				let tagStr = data.features.join("|");
				return tagStr
			},
			onClickAddContrast() {
				this.$emit("onClickAddContrast", this.data)
			}
		}
	}
</script>

<style>
	.button::after {
		border: none;
	}

	.container-cell {
		align-items: center;
		margin: 24rpx 32rpx 0 32rpx;
	}

	.container-cell-bg {
		border-radius: 15rpx;
		align-items: center;
		background-color: white;
		/* padding: 15rpx 20rpx 15rpx 10rpx; */
		padding: 15rpx;
		/* width: 100%; */
		display: flex;
		justify-content: space-between;
	}

	.container-left {
		min-width: 80%;
		align-items: center;
		padding-right: 25rpx;
		background-color: transparent;
		display: flex;
		flex-direction: row;
	}

	.image {
		min-width: 80rpx;
		max-width: 80rpx;
		height: 80rpx;
		/* background-color: #F8F8F8; */
		margin-right: 32rpx;
	}

	.title1 {
		color: #464646;
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.title2 {
		color: #464646;
		font-size: 24rpx;
		margin-bottom: 8rpx;
	}

	.title2Border {
		border: 1rpx solid #999999;
		color: #999999;
		font-size: 22rpx;
		line-height: 32rpx;
		padding: 0 8rpx;
		border-radius: 6rpx;
		margin-right: 16rpx;
		margin-bottom: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #fff;
	}

	.container-right {
		display: flex;
		justify-content: center;
		/* width: 100%; */
		background-color: transparent;
		margin-right: 10rpx;
	}

	.text-add {
		height: 50rpx;
		width: 120rpx;
		color: #FF3B0A;
		background-color: #FFF;
		border: 2rpx solid #FF3B0A;
		border-radius: 25rpx;
		font-size: 24rpx;
		text-align: center;
		margin-right: -20rpx;
		line-height: 50rpx;
		font-weight: bold;
	}

	.text-add.select {
		background: #FF3B0A;
		color: #fff;
		border: none;
	}

	.college-radio {
		color: #FF5028;
	}

	.level {
		color: #bbbbbb;
		font-size: 24rpx;
	}
</style>